FlyTalk.views.MapZoom = Ext.extend(Ext.Panel, {
	id: 'mapPanel',
	title: 'Zoom',
	layout: 'hbox',
	fullscreen: false,
			
					
		initComponent: function () {
		//OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		OpenLayers.Util.onImageLoadErrorColor = "transparent";
		
		//Initialiazing OpenLayers variables
		this.mapBounds = new OpenLayers.Bounds( 0.0, -2048.0, 2048.0, 0.0);
		this.mapMinZoom= 0;
		this.mapMaxZoom= 3;
					
			this.options = {
				controls: [],
				maxExtent: new OpenLayers.Bounds(  0.0, -2048.0, 2048.0, 0.0 ),
				maxResolution: 8.000000,
				numZoomLevels: 4
				};
			//the reason I spent three days on this, OpenLayers.js looking for a <div> named after the variable below, in this case mapper
			this.map = new OpenLayers.Map('mapper', this.options);
		
			this.layer = new OpenLayers.Layer.TMS( "TMS Layer","",
				{  url: "", serviceVersion: '.', layername: '.', alpha: false,
					type: 'png', getURL: this.overlay_getTileURL 
				});
			
			this.map.addLayer(this.layer);
			this.map.zoomToExtent( this.mapBounds );	
		
			this.map.addControl(new OpenLayers.Control.PanZoomBar());
			this.map.addControl(new OpenLayers.Control.MousePosition());
			this.map.addControl(new OpenLayers.Control.MouseDefaults());
			this.map.addControl(new OpenLayers.Control.KeyboardDefaults());	
			
		
		//FlyTalk.views.MapZoom.superclass.initComponent.call(this);
			
			
		
		
		},
		
		//functions that calculate window size, zoom size and set map accordingly
		overlay_getTileURL:        function (bounds) {
		var res = this.map.getResolution();
		var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
		var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
		var z = this.map.getZoom();
		if (x >= 0 && y >= 0) {
			return this.url + z + "/" + x + "/" + y + "." + this.type;				
		} else {
			return "http://www.maptiler.org/img/none.png";
			//return "http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg";
		}
		},
		
		getWindowHeight:		function () {
		if (self.innerHeight) return self.innerHeight;
		if (document.documentElement && document.documentElement.clientHeight)
			return document.documentElement.clientHeight;
		if (document.body) return document.body.clientHeight;
			return 0;
		},
		
		getWindowWidth:	    function () {
		if (self.innerWidth) return self.innerWidth;
		if (document.documentElement && document.documentElement.clientWidth)
			return document.documentElement.clientWidth;
		if (document.body) return document.body.clientWidth;
			return 0;
		},
		
		resize:	    function()  {  
		var map = document.getElementById("map");  
		var header = document.getElementById("header");  
		var subheader = document.getElementById("subheader");  
		map.style.height = (getWindowHeight()-80) + "px";
		map.style.width = (getWindowWidth()-20) + "px";
		header.style.width = (getWindowWidth()-20) + "px";
		subheader.style.width = (getWindowWidth()-20) + "px";
		if (map.updateSize) { map.updateSize(); };
		} ,
		onresize: function(){ 
		resize();
		}
		
		
		
		
});	

	



